<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>函数代码多次执行(Function code is executed multiple times)</title>
  <!-- 
  在JavaScript中，函数代码可以被多次执行，这种特性使得函数成为代码复用和模块化的重要工具。以下是关于JavaScript中函数多次执行的总结说明：
  一、函数的定义
  - 函数是一个封装了特定逻辑的代码块，可以通过名称调用并执行。
  - 函数可以接受参数并返回值，从而实现灵活的功能。

  二、函数的调用
  1. 直接调用：
    - 通过函数名直接调用函数，函数体内的代码会被执行。
    function greet(name) {
      console.log("Hello, " + name + "!");
    }

    greet("Alice"); // 输出: Hello, Alice!
    greet("Bob");   // 输出: Hello, Bob!
  2. 通过事件触发：
    - 函数可以作为事件处理程序，响应用户操作（如点击、输入等）。
    document.getElementById("myButton").addEventListener("click", function() {
      greet("User");
    });
  3. 递归调用：
    - 函数可以在其自身内部调用，从而形成递归。
    function factorial(n) {
      if (n <= 1) return 1;
      return n * factorial(n - 1);
    }

    console.log(factorial(5)); // 输出: 120
  三、函数的重用性
  - 参数化：通过传递不同的参数，可以在多次调用时实现不同的行为。
    function add(a, b) {
      return a + b;
    }

    console.log(add(2, 3)); // 输出: 5
    console.log(add(10, 20)); // 输出: 30
  - 返回值：函数可以返回值，调用者可以根据返回值执行不同的操作。
    function square(x) {
      return x * x;
    }

    const result1 = square(4); // 输出: 16
    const result2 = square(5); // 输出: 25
  四、函数的作用域

  - 每次调用函数时，都会创建一个新的执行上下文，这样可以确保函数内部的变量不会与其他调用的变量冲突。
    function counter() {
      let count = 0;
      return function() {
        count += 1;
        return count;
      };
    }

    const count1 = counter();
    console.log(count1()); // 输出: 1
    console.log(count1()); // 输出: 2
    const count2 = counter();
    console.log(count2()); // 输出: 1

  五、总结
  - JavaScript中的函数可以被多次执行，通过参数化和返回值实现灵活的功能。
  - 函数的多次调用能够提高代码的复用性和可维护性。
  - 每次调用函数时，都会创建新的执行上下文，确保函数内部的变量不会相互干扰。
   -->
</head>
<body>

  <script>

    // 1. 函数的定义
    function add(a, b) {
      return a + b;
    }

    // 2. 函数的调用
    const result = add(2, 3);
    console.log(result); // 输出: 5

    // 3. 函数的多次调用
    const result2 = add(10, 20);
    console.log(result2); // 输出: 30

    // 4. 函数的递归调用
    function factorial(n) {
      if (n <= 1) return 1;
      return n * factorial(n - 1);
    }

    const result3 = factorial(5);
    console.log(result3); // 输出: 120
    
  </script>
  
</body>
</html>